<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="my-card">
        <div slot="header" class="clearfix">
          <!-- 左侧表单 -->
          <el-row class="search-box" type="flex" justify="space-between">
            <el-col :span="12">
              <span style="margin-right: 10px">学科名称</span>
              <el-input
                v-model.trim="query.subjectName"
                style="width: 220px"
              ></el-input>
              <el-button class="my-shou" @click="reset">清除</el-button>
              <el-button type="primary" class="my-cha" @click="getSubjectsList"
                >查询</el-button
              >
            </el-col>
            <el-button
              icon="el-icon-edit"
              type="success"
              @click="showDialog = true"
              >新增学科</el-button
            >
            <!-- <el-button
              class="my-btn"
              style="padding: 3px 0"
              type="text"
              @click="showDialog = true"
            >
              <i class="el-icon-edit"></i>
              新增学科
            </el-button> -->
          </el-row>
        </div>
        <!-- 搜索表单 -->

        <el-alert type="info">数据一共{{ total }}条</el-alert>

        <!-- 列表 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="120">
          </el-table-column>

          <el-table-column prop="username" label="创建者" width="120">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="200">
         <template v-slot="{ row }">
              {{ row.addDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="tags" label="标签" width="120">
          </el-table-column>
          <el-table-column prop="totals" label="题目数量" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <el-button
                @click="$router.push('directorys')"
                type="text"
                size="medium"
                >学科分类</el-button
              >
              <el-button type="text" size="medium" @click="$router.push('tags')"
                >学科标签</el-button
              >
              <el-button
                type="text"
                size="medium"
                @click="editHandler(scope.row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="medium"
                @click="delHandler(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="block" style="float: right; margin: 20px">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 弹出层 -->
      <el-dialog title="修改学科" :visible.sync="showDialog" width="400px">
        <el-form :inline="true" :model="formData" :rules="rules" ref="form">
          <el-form-item label="学科名称" label-width="100px">
            <el-input
              v-model="formData.subjectName"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              v-model="formData.isFrontDisplay"
              inactive-color="#ff4949"
              :inactive-value="0"
              active-color="#13ce66"
              :active-value="1"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="submitOk">确 定</el-button>
        </div>
      </el-dialog>
      <!-- --------------------------- -->
      <!-- <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
import {
  getSubjectsList,
  addSubjectList,
  delUserData,
  editSubjectData,
  detailUserData,
} from "@/api/subject";
export default {
  name: "articles",
  data() {
    return {
      formData: {
        subjectName: "",
        isFrontDisplay: 0,
      },
      // 表单验证规则
      rules: {
        subjectName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
      },
      tableData: [],
      query: {
        page: 1,
        pagesize: 10,
        subjectName: "",
      },
      total: 0,
      showDialog: false,
    };
  },
  created() {
    this.getSubjectsList();
  },
  methods: {
    reset() {
      this.showDialog = false;
      this.formData = {
        subjectName: "",
        isFrontDisplay: 0,
      };
      // this.getSubjectsList();
    },
    // 确定增加或者修改学科
    async submitOk() {
      //  1.验证表单
      // await this.$refs.form.validate();
      // 新增功能
      if (this.formData.id) {
        // 编辑
        await editSubjectData(this.formData);
        // console.log(111);
        // console.log(res);
      } else {
        // 添加
        let data = await addSubjectList(this.formData);
        // console.log(data, 22222);
      }

      // 提示框
      // this.$message.success(this.formData.id ? "修改成功" : "添加成功");
      // 列表渲染
      this.getSubjectsList();
      // 关闭弹层
      this.showDialog = false;
      // 数据清空
      this.formData = {
        subjectName: "",
        isFrontDisplay: 0,
      };
    },
    // 【修改功能】2 定义修改的事件函数
    async editHandler(id) {
      console.log(id, 1111);
      // 1. 发送请求，查询单个
      let res = await detailUserData(id);
      console.log(res, 222); // 看network
      // 2. 单行数据，赋给表单
      this.formData = res;
      // 3. 弹框打开
      this.showDialog = true;
    },
    // 每页数量的切换事件
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.query.pagesize = val;
      this.getSubjectsList();
    },
    // 页码的切换事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // val就是最新的页码
      this.query.page = val;
      this.getSubjectsList();
    },
    async getSubjectsList() {
      let { items, counts } = await getSubjectsList(this.query);
      this.tableData = items;
      this.total = counts;
    },

    // 删除功能
    async delHandler(id) {
      // 1. 弹出确认框
      await this.$confirm("确认删除吗？");
      // 2. 发送请求
      await delUserData(id);
      // 3. 提示成功
      this.$message.success("删除成功");
      // 4. 更新列表
      this.getSubjectsList();
    },
  },
};
</script>

<style lang="scss" scoped>
// [data-v-f70f99cc]
// [data-v-f70f99cc]
// my-card
.my-card[data-v-f70f99cc] .el-card__header {
  padding: 100px;
  border-bottom: 5px solid #ebeef5 !important;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
<style>
.my-card .el-card__header {
  padding-bottom: 0px;
  border-bottom: 0px solid #ebeef5 !important;
}
.my-card .el-card__body {
  padding-top: 0px;
}
.my-card .el-form-item {
  margin: 10px 0;
}
.my-card .el-alert {
  margin: 8px 0 16px;
}
.my-card .el-table__header-wrapper {
  border-bottom: 2px solid #e8e8e8;
  background-color: #fafafa;
}
.my-card th {
  background-color: #fafafa !important;
}
.my-card .my-btn {
  width: 95px;
  height: 32px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.my-card .my-shou {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
  margin-left: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.my-card .my-cha {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
}
.my-card .el-input__inner {
  height: 32px;
}
.my-card .my-item-two {
  margin-left: 40px;
}
</style>
